<script>
import { mapState } from 'vuex'
import AOS from "aos"
import { correctPullDown } from '@/utils/global'
import ChangePage from '@/mixins/ChangePage.vue'
// 初始化动画
AOS.init();

export default {
  name: 'Page',
  // 混入方法，公共方法previousPage，上滑至上一页
  mixins: [ ChangePage ],
  computed: {
    // 动态计算高度
    cssVar() {
      return {
        'height': document.documentElement.clientHeight + 'px'
      }
    },
    // 获取性别及年度账单数据
    ...mapState({
      type: state => state.info.identity
    })
  },
  mounted () {
    // 每个页面都要有
    correctPullDown()
  },
  methods: {
    changePage() {
      //   假设type 1 为教师，2 为学生
      this.$router.push({
        path: this.type === '1' ? '/canteen/teacher' : '/lesson/student'
      })
    }
  }
}
</script>

<template>
  <div v-swipeup="changePage" v-swipedown="previousPage">
    <div class="index-page" :style="cssVar" @click="changePage">
      <div class="page2-con">
          <div class="container">
            <div>
              <div class="content">
                <!-- 第1行 -->
                <p>
                  <span v-for="(char, index) in '你好，亲爱的ZUELers'.split('')" :key="index"
                        :style="{ animationDelay: `${index * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第2行 -->
                <p>
                  <span v-for="(char, index) in '冬至阳生，岁回律转'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 6) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第3行 -->
                <p>
                  <span v-for="(char, index) in '桑榆非晚，柠月如风'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 12) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第4行 -->
                <p>
                  <span v-for="(char, index) in '回顾2024你与中南大的故事'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 18) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第5行 -->
                <p>
                  <span v-for="(char, index) in '记忆的匣子里往事如繁星般闪烁'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 24) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第6行 -->
                <p>
                  <span v-for="(char, index) in '三餐四季'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 30) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第7行 -->
                <p>
                  <span v-for="(char, index) in '笑与泪并存'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 36) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第8行 -->
                <p>
                  <span v-for="(char, index) in '得与失相依'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 42) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第9行 -->
                <p>
                  <span v-for="(char, index) in '准备好了吗'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 48) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第10行 -->
                <p>
                  <span v-for="(char, index) in '让我们拾起记忆的碎片'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 54) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <!-- 第11行 -->
                <p>
                  <span v-for="(char, index) in '倒转时光的齿轮'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 60) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
                <p>
                  <span v-for="(char, index) in '一起来看看你在中南大的2024吧'.split('')" :key="index"
                        :style="{ animationDelay: `${(index + 66) * 0.05}s` }">
                    {{ char }}
                  </span>
                </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.index-page{
  background: url("../../assets/images/home/2.jpg") no-repeat;
  background-size: 100% 100%;
}

.page2-con {
  padding: 50px 130px;
}

p {
  color: #5d3d3d;
}

/* 基础样式 */
.container {
  margin-top: 3em;
  margin-left: 0.1em;
  margin-right: 2em;
  width: 100%;
  background: none;
  padding: 18vw; /* 更小的视口单位，进一步减少内边距 */
  transform: rotate(-5deg); /* 文案旋转 */
  text-align: center;
  display: flex;
  justify-content: flex-start; /* 水平靠左 */
  align-items: flex-end;     /* 垂直靠底部 */
}

/* 内容区域样式 */
.content {
  font-size: 0.9vw; /* 更小的字体大小 */
  line-height: 0.7; /* 更小的行高 */
  letter-spacing: 0.005em; /* 更紧凑的字母间距 */
  color: #333;
  position: relative;
  left: -16vw; /* 向左偏移更多，靠近左边 */
  bottom: -12vw; /* 向下偏移更多，靠近底部 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: visible; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 当内容溢出时显示省略号 */
}

.content p {
  line-height: 0.7; /* 更小的行高，避免行间距过大 */
  letter-spacing: -0.05em; /* 更紧凑的字母间距 */
  margin-bottom: 0.15vw; /* 更小的段落间距 */
}

.content span {
  opacity: 0;
  animation: fadeIn 1s forwards;
  display: inline-block;
  margin-right: 0.2em; /* 更紧凑的字与字之间的间距 */
}

/* 媒体查询，适配不同屏幕大小 */
@media (max-width: 768px) {
  .container {
    padding: 7vw; /* 更改为适合小屏设备的相对单位 */
  }

  .container::before {
    width: 12vw; /* 更适合小屏设备的尺寸 */
    height: 3.5vw;
  }

  .content {
    font-size: 1.5vw; /* 更适合小屏设备的字体大小 */
    left: -5vw; /* 向左偏移更多 */
    bottom: -3vw; /* 向下偏移更多 */
  }
}

/* 更小屏幕适配 */
@media (max-width: 480px) {
  .container {
    padding: 8vw; /* 更适合超小屏幕设备 */
  }

  .container::before {
    width: 16vw;
    height: 4.5vw;
  }

  .content {
    font-size: 2.5vw; /* 更适合超小屏设备的字体大小 */
    left: -9vw; /* 更向左偏移 */
    bottom: -4vw; /* 更向下偏移 */
  }
}


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>

